<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
</head>
<body>
  <div class="header container">
    wdnmd 商品列表

    <p class="active">
      <a href="./cart.html">查看购物车</a>
      <a href="./index.html">返回首页</a>
    </p>
  </div>

  <!-- 筛选大盒子 -->
  <div class="box container">
    <div class="content category">
      <div class="left">
        分类
      </div>
      <ul class="right">
        <!-- JS 渲染 -->
      </ul>
    </div>
    <div class="content filter">
      <div class="left">
        筛选
      </div>
      <ul class="right">
        <li data-type="" class="filter_item active">全部</li>
        <li data-type="sale" class="filter_item">折扣</li>
        <li data-type="hot" class="filter_item">热销</li>
      </ul>
    </div>
    <div class="content sale">
      <div class="left">
        折扣
      </div>
      <ul class="right">
        <li data-type="10" class="sale_item active">全部</li>
        <li data-type="5" class="sale_item">5</li>
        <li data-type="6" class="sale_item">6</li>
        <li data-type="7" class="sale_item">7</li>
        <li data-type="8" class="sale_item">8</li>
        <li data-type="9" class="sale_item">9</li>
      </ul>
    </div>
    <div class="content search">
      <div class="left">
        搜索
      </div>
      <div class="right">
        <input type="text">
      </div>
    </div>
    <div class="content sort">
      <div class="left">
        排序
      </div>
      <ul class="right">
        <li data-type="id" data-method="ASC" class="sort_item active">综合升序</li>
        <li data-type="id" data-method="DESC" class="sort_item">综合降序</li>
        <li data-type="price" data-method="ASC" class="sort_item">价格升序</li>
        <li data-type="price" data-method="DESC" class="sort_item">价格降序</li>
        <li data-type="sale" data-method="ASC" class="sort_item">折扣升序</li>
        <li data-type="sale" data-method="DESC" class="sort_item">折扣降序</li>
      </ul>
    </div>
    <div class="content pagenation">
      <div class="left">
        分页
      </div>
      <div class="right">
        <span class="left disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="right">&gt;</span>
        <select>
          <option value="12">12</option>
          <option value="16">16</option>
          <option value="20">20</option>
          <option value="24">24</option>
        </select>
        <input type="text" value="1">
        <button class="go">跳转</button>
      </div>
    </div>
  </div>

  <!-- 商品列表主体内容 -->
  <ul class="list container">
    <!-- JS 渲染 -->
  </ul>

  <div class="footer">网页底部</div>

  <script src="../js/utils.js"></script>
  <script src="../js/list.js"></script>
</body>
</html>
